<template>
  <div class="home">
    <my-header>
       <template slot="center">
          <h4>图书商城</h4>
       </template>
       <template slot="right">
          <span @click="$router.push('/about')">我的书架</span>
       </template>
    </my-header>
    <input class="search" v-model="inputVal" @change="search" type="text" placeholder="输入书名称搜索">
    <div class="content">
      <my-list :book="showList"></my-list>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from '../components/myHeader';
import myList from '../components/myList';
import api from '../api/index.js';
export default {
  name: 'HomeView',
  components: {
    myHeader,
    myList
  },
  data(){
    return {
      allList: [], // 所有的书的数据，
      showList: [], // 要展示的书的数据
      inputVal: '', // 搜索框输入的值
    }
  },
  created() {
    api.get('new_file.json').then(res => {
      this.allList = res;
      this.showList = res;
    })
  },
  methods: {
    search(){ // 搜索事件
      this.showList = this.inputVal? this.allList.filter(item => item.name == this.inputVal) : this.allList;
    }
  },
}
</script>

<style lang='scss' scoped>
 .home{
   height: 100%;
   .search{
     height: 40px;
     background: #d2d2d2;
     padding: 0 10px;
     border: none;
     width: 100%;
     outline: none;
     box-sizing: border-box;
   }
   .content{
     height: calc(100% - 90px);
     overflow-y: auto;
   }
 }
</style>
